<style>
    body{
        background: #f3f3f3;
    }
    .postHouse{
        padding-bottom: 2rem;
    }
    .postHouse li{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: .5rem;
        background: white;
        margin-bottom: 1px;
        position: relative;
    }
    .postHouse .iconImg{
        height: 1rem;        
        width:7%;
        text-align: center;
    }
    .postHouse .iconImg img{
        height: 100%;        
    }
    /* 点击展开房屋类型 */
    .typeBox{
        background: none !important;
    }
    .typeBox div{
        border: 1px solid #39AC6A;
        padding: .15rem 1rem;
        text-align: center;
        background: white;
        border-radius: 1rem;
        color: #39AC6A;
    }
    /* 点击展开房屋面积 */
    .AreaBox,.ModelBox{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        background: none !important;
    }
    .AreaBox div{
        border: 1px solid #39AC6A;
        padding: .1rem 0;
        width: 20%;
        text-align: center;
        background: white;
        border-radius: 1rem;
        color: #39AC6A;
        margin-top: .5rem;
    }
    .ModelBox div{
        border: 1px solid #39AC6A;
        padding: .1rem 0;
        width: 20%;
        text-align: center;
        background: white;
        border-radius: 1rem;
        color: #39AC6A;
        margin-bottom: .5rem;
    }
    /* 多余的div */
    .TTT{
        opacity: 0;
    }
    .cntT{        
        width: 70%;
        text-align: center; 
    }
    .map{
        margin-top: .5rem;
    }
    .upImg div{
        position: relative;
        text-align: left;
        width: 3rem;
        height: 1rem;
        padding: .3rem 1rem;
        border-radius: 1rem;
        background:#39AC6A;
        color: white;
    }
    .upImg div span{
        position: absolute;
    }
    .upImg div input{   
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
    }
    /* 房间图片 */
    .houseImg{
        display: block !important;
        background: none !important;
    }
    .houseImg div{
        position: relative;
        width: 100%;
        height: 100px;
        margin-bottom: 1rem;
        background: white;
    }
    .houseImg div span{
        position: absolute;
        padding: 0 .5rem;
        right:0;
        top: 0;
        background: #39AC6A;
        color: white;
        border-radius: .5rem;
        z-index: 2;
    }
    .houseImg div img{
        width: 100%;
        height:100%;
        position: absolute;
        z-index: 1;
    }
    .subData{        
        padding:.3rem 1.5rem;
        border-radius: 1rem;
        background: #39ac6a;
        color: white;
        margin-left: 40%;
    }
    .updata{
        position: fixed;
        box-sizing: border-box;
        width: 100%;
        padding: .5rem;
        bottom: 0;
        background: white;
        z-index: 19999
    }
    /* 地图样式 */
    .HouseMap{
        height: 300px;
    }
    #container{
        width: 100%;
    }
@media screen and (min-width: 320px) and (max-width: 360px) {
    .postHouse li .title{
        width: 19%;        
        text-align: right;
        font-size: 80%;
        color: #333;
    }
    .postHouse li .cnt{
        width: 79%;
    }
    /* 图片大小*/
    .postHouse .iconImg{
        width: 5%;
        height: .8rem;
    }
}
@media screen and (min-width: 360px) and (max-width: 413px) { 
    .postHouse li .title{
        width: 19%;
        text-align: right;
        
        font-size: 80%;
    }
    .postHouse li .cnt{
        width: 79%;
        font-size: 100%;
    }
}
@media screen and (min-width: 414px) {
    .postHouse li .title{
        width: 16%;
        text-align: right;
        font-size: 80%;
    }
    .postHouse li .cnt{
        width: 82%;
    }
}

</style>

<ul class="postHouse">
    <li>
        <span class="title">房间名:</span>
        <input type="text" ng-model="houseData.houseName" name="houseName" class="cnt" placeholder="请输入房间名">

    </li>
    <li>
        <span class="title">房东姓名:</span>
        <input type="text" name="landName" ng-model="houseData.userName" class="cnt" placeholder="请输入姓名">
    </li>
    <li>
        <span class="title">房东电话:</span>
        <input type="text" name="landPhone" ng-model="houseData.phone" class="cnt" placeholder="请输入房东电话">
    </li>
    <li>
        <span class="title">总价格:</span>
        <input type="text" name="allPrice" class="cnt" ng-model="houseData.price" placeholder="请输入总价格">
    </li>
    <li class="map" ng-click="houseADD=!houseADD">
        <span class="title">位置</span>
        <!-- <input type="text" name="address" class="cntT" ng-model="houseData.address" id='houseADD' disabled="disabled"> -->
        <span id='houseADD' class="cntT">{{houseData.address}}</span>
        <div class="iconImg" >
            <img src="../gy/images/icon/forward.png" alt="地址">
        </div>
    </li>
    <li class="HouseMap" ng-show="houseADD">
        <!-- S 高德地图 -->
        <add-map options="mapOptions" style="height:100%">
            <div class="marker-route marker-marker-bus-from"></div>
        </add-map>       
        <!-- 高德地图 E -->
    </li>
    <li class="houseType" ng-click="houseType=!houseType">
        <span class="title">房屋类型</span>
        <!-- <input type="text"  ng-value="HouseType"> -->
        <span name="houseType" class="cntT">
            <span ng-show="houseData.houseType==1">长租</span>
            <span ng-show="houseData.houseType==4">住房出售</span>
            <span ng-show="houseData.houseType==3">营业房租贷</span>
        </span>
        <div class="iconImg">
            <img src="../gy/images/icon/forward.png" ng-show="houseType">
            <img src="../gy/images/icon/down.png" ng-show="!houseType">
        </div>

    </li>
    <li class="typeBox" ng-show="!houseType">
            <div ng-click="selectHouseType('1')">长租</div>
            <div ng-click="selectHouseType('4')">住房出售</div>
            <div ng-click="selectHouseType('3')">营业房租贷</div>
    </li>   
    <li class="houseArea"  ng-click="areaHouse=!areaHouse">
        <span class="title">面积</span>
        <div  class="cntT" >
            <span  name="houseArea">{{houseData.hosueArea}} </span>            
        </div>      

        <div class="iconImg">
            <img src="../gy/images/icon/forward.png" ng-show="areaHouse">
            <img src="../gy/images/icon/down.png" ng-show="!areaHouse">
        </div>
    </li> 
    <li class="AreaBox" ng-show="!areaHouse">
            <div ng-click="selectArea(30)">30</div>
            <div ng-click="selectArea(40)">40</div>
            <div ng-click="selectArea(50)">50</div>
            <div ng-click="selectArea(60)">60</div>
            <div ng-click="selectArea(70)">70</div>
            <div ng-click="selectArea(80)">80</div>
            <div ng-click="selectArea(90)">90</div>
            <div ng-click="selectArea(100)">100</div>
            <div ng-click="selectArea(110)">110</div>
            <div ng-click="selectArea(120)">120</div>
            <div ng-click="selectArea('120以上')">120以上</div>
            <div class="TTT"></div>            
    </li> 
    <li class="houseModel" ng-click="modelHouse=!modelHouse">
        <span class="title">户型</span>
        <span name="houseModel" class="cntT">
            <span ng-show="houseData.houseModel==1">套1</span>
            <span ng-show="houseData.houseModel==2">套2</span>
            <span ng-show="houseData.houseModel==3">套3</span>
            <span ng-show="houseData.houseModel==4">套4</span>
            <span ng-show="houseData.houseModel==5">其他</span>
        </span>
        <div class="iconImg">
            <img src="../gy/images/icon/forward.png" ng-show="modelHouse">
            <img src="../gy/images/icon/down.png" ng-show="!modelHouse">
        </div>
    </li> 
    <li class="ModelBox" ng-show="!modelHouse">
            <div ng-click="modelHosue('1')">套1</div>
            <div ng-click="modelHosue('2')">套2</div>
            <div ng-click="modelHosue('3')">套3</div>            
            <div ng-click="modelHosue('4')">套4</div> 
            <div ng-click="modelHosue('5')">其他</div>
    </li> 
    <li class="upImg">
        <span class="title">图片上传</span>
        <div ng-hide="upHouseImg.length>=10">
            <span>添加图片</span>            
            <input type="file" name="houseImg" id="upHouseImg" file-model="fileToUpload">
        </div>
    </li>
    <li class="houseImg">
        <div ng-repeat="upHouseImg in upHouseImg track by $index">
            <span ng-click="delHouseImg($index)">删除</span>
            <img alt="房间图片" ng-src="{{upHouseImg}}" >                
        </div>
    </li>
    <div class="updata">
        <button class="subData" ng-click="subHouseData()">提交</button>
    </div>
</ul>